<script setup lang="ts">
import { studyacademicDegree, workPrice, workTime } from "#/index.json"
import { onMounted, ref, watch } from "vue"
import { formRules } from "./rules"
import { cloneDeep } from "lodash-es"
import { UpdatePositionFormParams } from "@/api/position/type"
import { addressCascaderOpts, transformAddressToString } from "@/utils/transform"
import { getPositionInformation, updatePosition } from "@/api/position"
import { ElMessage } from "element-plus"

const props = defineProps({
  id: String
})

const DEFAULT_FORM_DATA: UpdatePositionFormParams = {
  id: "",
  studyingExperience: undefined as any,
  workAddress: [] as any,
  workDescription: "",
  workPrice: undefined as any,
  workTime: undefined as any,
  workName: ""
}
const formRef = ref()
const formData = ref(cloneDeep(DEFAULT_FORM_DATA))
const cascaderOpts = ref()

function getPositionData(id: string) {
  getPositionInformation({ id: Number(id) }).then(({ data }) => {
    const [positionVO] = data.records
    for (const key in positionVO) {
      if (Object.prototype.hasOwnProperty.call(formData.value, key)) {
        if (key !== "workAddress") {
          // @ts-expect-error
          formData.value[key] = positionVO[key]
        } else {
          // @ts-expect-error
          formData.value["workAddress"] = positionVO.workAddress.map((item) => String(item))
        }
      }
    }
  })
}

function submitForm() {
  formRef.value.validate((valid: boolean) => {
    if (!valid) return
    const data = {
      ...formData.value,
      workAddress: transformAddressToString(formData.value.workAddress || [])
    }
    updatePosition(data).then(() => {
      ElMessage({ type: "success", message: "提交成功" })
      getPositionData(formData.value.id)
    })
  })
}

watch(
  () => props.id,
  (cur) => {
    getPositionData(cur!)
  },
  { immediate: true }
)

onMounted(() => {
  cascaderOpts.value = addressCascaderOpts
})
</script>

<template>
  <div class="app-container">
    <el-form ref="formRef" :model="formData" :rules="formRules" label-width="80px" label-position="left">
      <el-form-item prop="workName" label="职位名称">
        <el-input v-model="formData.workName" placeholder="请输入职位名称" style="width: 400px" />
      </el-form-item>
      <el-form-item prop="studyingExperience" label="学历">
        <el-select v-model="formData.studyingExperience" style="width: 200px" clearable>
          <el-option v-for="{ label, value } in studyacademicDegree" :key="value" :label="label" :value="value" />
        </el-select>
      </el-form-item>
      <el-form-item prop="workAddress" label="工作地址" style="width: 300px" clearable>
        <el-cascader v-model="formData.workAddress as any" :options="cascaderOpts" />
      </el-form-item>
      <el-form-item prop="workDescription" label="工作描述">
        <el-input
          v-model="formData.workDescription"
          type="textarea"
          style="width: 800px"
          :rows="10"
          placeholder="请输入工作描述"
        />
      </el-form-item>
      <el-form-item prop="workPrice" label="薪资范围">
        <el-select v-model="formData.workPrice" placeholder="请选择薪资范围" style="width: 200px" clearable>
          <el-option v-for="{ label, value } in workPrice" :key="value" :value="value" :label="label" />
        </el-select>
      </el-form-item>
      <el-form-item prop="workTime" label="工作经验">
        <el-select v-model="formData.workTime" style="width: 170px" placeholder="请选择工作经验范围" clearable>
          <el-option v-for="{ value, label } in workTime" :key="value" :label="label" :value="value" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">提交修改</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<style scoped lang="scss"></style>
